<script setup lang="ts">
import { computed } from 'vue';

const props: any = defineProps<{
    ujt: any;
    id?: any;
}>();
const { $global, $model } = props.ujt;
if (!$global.pop[props.id]?.zindex) {
    $global.pop[props.id].zindex = 101;
}

const cmEvent = computed(() => {
    if (!$global.pop[props.id]?.event) {
        return 'auto';
    } else {
        return $global.pop[props.id]?.event;
    }
});

if ($global.scale == undefined) {
    $global.scale = 1;
}

const cmMaskstyle = computed(() => {
    let tmpStyle = $global.pop[props.id]?.maskstyle || {};
    if ($global.pop[props.id].full == 2) {
        // 全屏模式
        tmpStyle = {
            display: 'block',
            ...tmpStyle,
        };
    } else if ($global.pop[props.id].full == 1) {
        // 比例窗口模式
        tmpStyle = {
            width: $global?.sys?.zoomwidth + 'px',
            height: $global?.sys?.zoomheight + 'px',
            ...tmpStyle,
        };
    } else {
        // 正常父级模式
        tmpStyle = {
            display: 'block',
            ...tmpStyle,
        };
    }
    if (cmEvent.value === 'auto') {
        tmpStyle['background-color'] = 'rgba(0, 0, 0, 0.3)';
    }
    return tmpStyle;
});
</script>

<template>
    <template v-if="$global.pop[props.id].full == 2">
        <teleport to="#popteleport" v-if="$global.pop[props.id].stat">
            <div
                class="as-pop-box-mask-2"
                :style="cmMaskstyle"
                :id="'popmask' + id"
            >
                <slot></slot>
            </div>
        </teleport>
    </template>
    <template v-else-if="$global.pop[props.id].full == 1">
        <teleport to="#popteleport" v-if="$global.pop[props.id].stat">
            <div class="as-pop-box-mask-1" :id="'popmask' + id">
                <div class="as-pop-box-mask-zoom" :style="cmMaskstyle">
                    <slot></slot>
                </div>
            </div>
        </teleport>
    </template>
    <template v-else>
        <div
            v-if="$global.pop[props.id].stat"
            class="as-pop-box-mask-0"
            :style="cmMaskstyle"
            :id="'popmask' + id"
        >
            <slot></slot>
        </div>
    </template>
</template>

<style scoped lang="scss">
.as-pop-box-mask-0 {
    position: absolute;
    z-index: v-bind('$global.pop[props.id].zindex');
    pointer-events: v-bind('cmEvent');
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: block;
}
.as-pop-box-mask-2 {
    position: fixed;
    z-index: v-bind('$global.pop[props.id].zindex');
    pointer-events: v-bind('cmEvent');
    top: 0;
    right: 0;
    width: 100vw;
    height: 100vh;
    display: block;
}
.as-pop-box-mask-1 {
    position: fixed;
    z-index: v-bind('$global.pop[props.id].zindex');
    pointer-events: v-bind('cmEvent');
    top: 0;
    right: 0;
    width: 100vw;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    .as-pop-box-mask-zoom {
        pointer-events: v-bind('cmEvent');
        zoom: v-bind('$global.scale');
        position: relative;
        display: block;
    }
}
</style>
